<template>
  <a-modal :title="title" :width="width" :visible="visible" @cancel="handleCancel" :footer="null">
    <a-spin :spinning="confirmLoading">
      <div class="antd-modal-form">
        <a-steps :current="current">
          <a-step v-for="item in steps" :key="item.title" :title="item.title" />
        </a-steps>
        <div class="steps-content" v-if="current==0">
          <a-checkbox-group v-model:value="formData.signingService" style="width: 100%;padding: 20px;" @change="handleCheckboxChange">
            <a-row>
              <a-col :span="8" v-for="item in signingServiceList" :key="item.value">
                <a-checkbox :value="item.value" class="ss-checkbox">{{item.text}}</a-checkbox>
              </a-col>
            </a-row>
          </a-checkbox-group>
          <a-collapse ghost>
            <a-collapse-panel header="任务描述[选填]">
              <a-textarea type="textarea" :rows="3" v-model:value="formData.introduce"
                          placeholder="此处为非必填项" ></a-textarea>
            </a-collapse-panel>
          </a-collapse>
        </div>
        <div v-if="current==1" style="margin-top: 30px;margin-left: 80px;">
          <a-row>
            <a-col :span="12">
              <Image :width="240" :src="formData.invitationCodeWx"
                     fallback=""
              />
              <p class="image-tip-cla">打开微信[扫一扫]</p>
            </a-col>
<!--            <a-col :span="12">
              <Image :width="240" :src="formData.invitationCodeZfb"
                     fallback=""
              />
              <p class="image-tip-cla">打开支付宝[扫一扫]</p>
            </a-col>-->
          </a-row>
        </div>
        <div class="steps-action">
          <a-button v-if="current < steps.length - 1" type="primary" @click="next" :disabled="nextDisabled">下一步</a-button>
<!--          <a-button v-if="current > 0" @click="prev">上一步</a-button>-->
          <a-button v-if="current == steps.length - 1" style="margin-left: 10px" type="primary" @click="handleDone">完成</a-button>
        </div>
      </div>
    </a-spin>
  </a-modal>
</template>

<script lang="ts" setup>
  import { ref, reactive, defineExpose } from 'vue';
  import { Image } from 'ant-design-vue';
  import { getSigningServiceList, create, saveOrUpdate } from "../ServiceTask.api";
  import { useMessage } from "/@/hooks/web/useMessage";
  import { useGlobSetting } from "/@/hooks/setting";

  const title = ref<string>('');
  const width = ref<number>(800);
  const visible = ref<boolean>(false);
  const disableSubmit = ref<boolean>(false);
  const emit = defineEmits(['register', 'success']);
  const confirmLoading = ref<boolean>(false);
  const { createMessage } = useMessage();
  const { filePreviewUrl } = useGlobSetting();
  const current = ref<number>(0);
  const signingServiceList = ref<any[]>([]);
  const nextDisabled = ref<boolean>(true);
  const formData = reactive<Record<string, any>>({
    signingService: '',
    introduce: '',
    invitationCodeWx: '',
    invitationCodeZfb: '',
  });
  const steps = ref<any>([
    {
      title: '请选择任务类型',
      content: '',
    },
    {
      title: '生成二维码',
      content: '',
    },
  ]);

  const next = async () => {
    //数据格式化
    let model = formData;
    if(!model || model==null || model.length===0){
      createMessage.warning("任务类型不能为空！");
    }
    //如果该数据是数组则转换为字符串类型
    if (model.signingService instanceof Array) {
      model.signingService = model.signingService.join(',');
    }
    confirmLoading.value = true;
    await create(model)
      .then((res) => {
        if (res.success) {
          formData.invitationCodeWx = filePreviewUrl + res.result.invitationCodeWx;
          // formData.invitationCodeZfb = filePreviewUrl + res.result.invitationCodeZfb;
          emit('success');
          current.value++;
        } else {
          createMessage.warning(res.message);
        }
      })
      .finally(() => {
        confirmLoading.value = false;
      });
  };
  const prev = () => {
    current.value--;
  };

  function handleDone(){
    visible.value = false;
  }

  function handleCheckboxChange(val){
    if(val.length > 0){
      nextDisabled.value = false;
    }else {
      nextDisabled.value = true;
    }
  }

  /**
   * 新增
   */
  async function add() {
    title.value = '生成合作邀请码';
    visible.value = true;
    current.value = 0;
    formData.signingService = [];
    formData.introduce = '';
    //获取签约服务类型列表
    const res = await getSigningServiceList();
    if (!res || res.length == 0) {
      signingServiceList.value = [];
    } else {
      signingServiceList.value = res;
    }
  }

  /**
   * 取消按钮回调事件
   */
  function handleCancel() {
    visible.value = false;
  }

  /**
   * 获取签约服务类型列表事件
   */
  // function getSigningServiceList() {
  //
  // }

  defineExpose({
    add,
    disableSubmit,
  });
</script>

<style lang="less" scoped>
  /**隐藏样式-modal确定按钮 */
  .jee-hidden {
    display: none !important;
  }

  .antd-modal-form {
    overflow-y: auto;
    padding: 24px 24px 24px 24px;
  }

  .steps-content {
    margin-top: 16px;
    border: 1px dashed #e9e9e9;
    border-radius: 6px;
    background-color: #fafafa;
    min-height: 240px;
  }

  .ss-checkbox{
    border: 1px solid #eae8e8;
    border-radius: 5px;
    width: 90%;
    height: 32px;
    line-height: 32px;
    padding-left: 10px;
    margin-top: 10px;
  }
  .steps-action {
    margin-top: 24px;
    float: right;
  }

  [data-theme='dark'] .steps-content {
    background-color: #2f2f2f;
    border: 1px dashed #404040;
  }
  .image-tip-cla{
    margin-left: 70px;
    margin-top: 5px;
  }
</style>
